์น์์์ ๊ฐ๋ ์ฑ ๋ฐ ์ ๊ทผ์ฑ ํฅ์์ ์ํ ๋์์์ ์ฃผ์ ๋ ์ด์์ ๊ตฌํ ๋ฐฉ๋ฒ์ ์ค๋ช ํ๋ CSS Ruby ์ข ํฉ ๊ฐ์ด๋์ ๋๋ค.
CSS Ruby ํด๋ : ๋์์์ ์ธ์ด ํ์ดํฌ๊ทธ๋ํผ ํฅ์ํ๊ธฐ
์น์ ๊ธ๋ก๋ฒ ๋ฏธ๋์ด์ด๋ฉฐ, ์ ์ธ๊ณ ์ฌ์ฉ์๋ค์ด ์ฝํ ์ธ ์ ์ ๊ทผํ๊ณ ์ฝ์ ์ ์๋๋ก ๋ณด์ฅํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ผ๋ณธ์ด, ์ค๊ตญ์ด, ํ๊ตญ์ด(CJK)์ ๊ฐ์ ๋์์์ ์ธ์ด์ ๊ฒฝ์ฐ, ํ์ค ํ์ดํฌ๊ทธ๋ํผ๋ง์ผ๋ก๋ ์๋ํ ์๋ฏธ๋ฅผ ์ ๋ฌํ๊ธฐ์ ๋ถ์กฑํ ๋๊ฐ ์์ต๋๋ค. ๋ฐ๋ก ์ด๋ CSS Ruby๊ฐ ์ ์ฉํ๊ฒ ์ฌ์ฉ๋ฉ๋๋ค. ์ด ์ข ํฉ ๊ฐ์ด๋์์๋ CSS Ruby์ ์ธ๊ณ๋ฅผ ๊น์ด ํ๊ณ ๋ค์ด, ์น์์ ๋์์์ ํ ์คํธ์ ๊ฐ๋ ์ฑ๊ณผ ์ ๊ทผ์ฑ์ ํฅ์์ํค๊ธฐ ์ํ ๋ชฉ์ , ๊ตฌํ ๋ฐฉ๋ฒ ๋ฐ ์ด์ ์ ํ์ํด ๋ณด๊ฒ ์ต๋๋ค.
CSS Ruby๋ ๋ฌด์์ธ๊ฐ?
CSS Ruby๋ ํ ์คํธ์ '๋ฃจ๋น ์ฃผ์'์ด๋ผ ๋ถ๋ฆฌ๋ ์ฃผ์์ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ๋ CSS ๋ด์ ๋ชจ๋์ ๋๋ค. ์ด ์ฃผ์์ ์ผ๋ฐ์ ์ผ๋ก ๊ธฐ๋ณธ ํ ์คํธ ์(๋๋ ๋๋ก๋ ์๋)์ ๋ฐฐ์น๋๋ ์์ ๋ฌธ์๋ก, ๋ฐ์ ์๋ด, ์๋ฏธ ๋ช ํํ ๋๋ ๊ธฐํ ๋ณด์ถฉ ์ ๋ณด๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด๋ฆฐ์ด ์ฑ ์ด๋ ์ธ์ด ํ์ต ์๋ฃ์์ ๋ณด๋ ๋ฐ์ ์๋ด์ ๋น์ทํ๋ค๊ณ ์๊ฐํ๋ฉด ๋ฉ๋๋ค.
๋ฃจ๋น ์ฃผ์์ ๋ค์๊ณผ ๊ฐ์ ์ด์ ๋ก ๋์์์ ์ธ์ด์์ ํนํ ์ค์ํฉ๋๋ค:
- ๋ฐ์ ๋ช ํํ: ๋ง์ ์ค๊ตญ ํ์(Hanzi), ์ผ๋ณธ ํ์(Kanji), ํ๊ตญ ํ์(Hanja)๋ ๋ฌธ๋งฅ์ ๋ฐ๋ผ ์ฌ๋ฌ ๋ฐ์์ด ์์ต๋๋ค. ๋ฃจ๋น๋ ์ฌ๋ฐ๋ฅธ ์ฝ๋ ๋ฒ(์: ์ผ๋ณธ์ด์ ํ๋ฆฌ๊ฐ๋ ์ฌ์ฉ)์ ์ ๊ณตํ ์ ์์ต๋๋ค.
- ์๋ฏธ ์ค๋ช : ๋ฃจ๋น๋ ์ ์ฐ์ด์ง ์๊ฑฐ๋ ์ค๋๋ ๋ฌธ์์ ๋ํ ๊ฐ๋ตํ ์ ์๋ ์ค๋ช ์ ์ ๊ณตํ์ฌ ๋ ๋์ ๋ ์์ธต์ด ํ ์คํธ์ ์ ๊ทผํ ์ ์๋๋ก ๋ง๋ญ๋๋ค.
- ์ธ์ด ํ์ต์ ์ง์: ๋ฃจ๋น๋ ํ์ต์๋ค์ด ์๋ก์ด ๋จ์ด์ ๋ฌธ์์ ์๋ฏธ์ ๋ฐ์์ ์ดํดํ๋ ๋ฐ ๋์์ ์ค ์ ์์ต๋๋ค.
๋ฃจ๋น ์ฃผ์์ด ์์ผ๋ฉด ๋ ์๋ค์ ํ ์คํธ๋ฅผ ์ดํดํ๋ ๋ฐ ์ด๋ ค์์ ๊ฒช์ ์ ์์ผ๋ฉฐ, ์ด๋ ์ข์ ์ค๋ฝ๊ณ ์ ๊ทผํ๊ธฐ ์ด๋ ค์ด ๊ฒฝํ์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. CSS Ruby๋ ์ด๋ฌํ ์ฃผ์์ ๊ตฌํํ๋ ํ์คํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ฌ ๋ค์ํ ๋ธ๋ผ์ฐ์ ์ ์ฅ์น์์ ์ผ๊ด๋ ๋ ๋๋ง์ ๋ณด์ฅํฉ๋๋ค.
CSS Ruby์ ๊ตฌ์ฑ ์์
CSS Ruby๋ฅผ ์ดํดํ๋ ค๋ฉด ํต์ฌ ์์๋ฅผ ํ์ ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
- <ruby>: ์ด๊ฒ์ ๋ฃจ๋น ์ฃผ์์ ์ํ ์ฃผ ์ปจํ ์ด๋ ์์์ ๋๋ค. ๊ธฐ๋ณธ ํ ์คํธ์ ์ฃผ์ ์์ฒด๋ฅผ ๊ฐ์๋๋ค.
- <rb>: ์ด ์์๋ ์ฃผ์์ด ์ ์ฉ๋๋ ๊ธฐ๋ณธ ํ ์คํธ๋ฅผ ๋ํ๋ ๋๋ค. 'rb'๋ 'ruby base'์ ์ฝ์์ ๋๋ค.
- <rt>: ์ด ์์๋ ์ค์ ์ฃผ์์ธ ๋ฃจ๋น ํ ์คํธ๋ฅผ ํฌํจํฉ๋๋ค. 'rt'๋ 'ruby text'์ ์ฝ์์ ๋๋ค.
- <rp>: ์ด ์ ํ์ ์์๋ CSS Ruby๋ฅผ ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํ ๋์ฒด ์ฝํ ์ธ ๋ฅผ ์ ๊ณตํฉ๋๋ค. ๋ฃจ๋น ํ ์คํธ ์ฃผ์์ ๊ดํธ๋ฅผ ํ์ํ์ฌ ์ฃผ์์์ ๋ํ๋ผ ์ ์์ต๋๋ค. 'rp'๋ 'ruby parenthesis'์ ์ฝ์์ ๋๋ค.
๋ค์์ ์ด๋ฌํ ์์๋ฅผ ์ฌ์ฉํ๋ ๊ฐ๋จํ ์์์ ๋๋ค:
<ruby>
<rb>ๆผขๅญ</rb>
<rp>(</rp><rt>ใใใ</rt><rp>)</rp>
</ruby>
์ด ์์์์:
- `<ruby>`๋ ์ ์ฒด ๋ฃจ๋น ์ฃผ์์ ์ปจํ ์ด๋์ ๋๋ค.
- `<rb>ๆผขๅญ</rb>`๋ ๊ธฐ๋ณธ ํ ์คํธ๊ฐ ํ์ "ๆผขๅญ"์์ ๋ํ๋ ๋๋ค.
- `<rt>ใใใ</rt>`๋ ์ฃผ์์ผ๋ก ํ๋ผ๊ฐ๋ ์ฝ๊ธฐ "ใใใ"(kanji)๋ฅผ ์ ๊ณตํฉ๋๋ค.
- `<rp>(</rp>`์ `<rp>)</rp>`๋ ๋ฃจ๋น๋ฅผ ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํ ๋์ฒด ๊ดํธ๋ฅผ ์ ๊ณตํฉ๋๋ค.
CSS Ruby๋ฅผ ์ง์ํ๋ ๋ธ๋ผ์ฐ์ ์์ ๋ ๋๋ง๋๋ฉด, ์ด ์ฝ๋๋ ํ์ ์์ ํ๋ผ๊ฐ๋ ์ฝ๊ธฐ๊ฐ ํ์๋ฉ๋๋ค. ๋ฃจ๋น๋ฅผ ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ ์์๋ "ๆผขๅญ(ใใใ)"๋ก ํ์๋ฉ๋๋ค.
CSS Ruby ์คํ์ผ๋ง
CSS๋ ๋ฃจ๋น ์ฃผ์์ ๋ชจ์์ ์ ์ดํ๊ธฐ ์ํ ์ฌ๋ฌ ์์ฑ์ ์ ๊ณตํฉ๋๋ค:
- `ruby-position`: ์ด ์์ฑ์ ๊ธฐ๋ณธ ํ ์คํธ์ ๋ํ ๋ฃจ๋น ํ ์คํธ์ ์์น๋ฅผ ์ง์ ํฉ๋๋ค. ๊ฐ์ฅ ์ผ๋ฐ์ ์ธ ๊ฐ์ `over`(๊ธฐ๋ณธ ํ ์คํธ ์)์ `under`(๊ธฐ๋ณธ ํ ์คํธ ์๋)์ ๋๋ค. `inter-character`๋ ๋ ๋ค๋ฅธ ์ต์ ์ผ๋ก, ๊ธฐ๋ณธ ํ ์คํธ ๋ฌธ์ ์ฌ์ด์ ๋ฃจ๋น ํ ์คํธ๋ฅผ ๋ฐฐ์นํ์ง๋ง ๋ ์ผ๋ฐ์ ์ ๋๋ค.
- `ruby-align`: ์ด ์์ฑ์ ๊ธฐ๋ณธ ํ ์คํธ์ ๋ํ ๋ฃจ๋น ํ ์คํธ์ ์ ๋ ฌ์ ์ ์ดํฉ๋๋ค. ๊ฐ์ผ๋ก๋ `start`, `center`, `space-between`, `space-around`, `space-evenly`๊ฐ ์์ต๋๋ค. `center`๊ฐ ์ข ์ข ๊ฐ์ฅ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ด๊ณ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ๋ฉ๋๋ค.
- `ruby-merge`: ์ด ์์ฑ์ ๋์ผํ ๋ฃจ๋น ํ ์คํธ๋ฅผ ๊ฐ์ง ์ธ์ ํ ๋ฃจ๋น ๋ฒ ์ด์ค๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ๊ฒฐ์ ํฉ๋๋ค. ๊ฐ์ `separate`(๊ฐ ๋ฃจ๋น ๋ฒ ์ด์ค๊ฐ ์์ฒด ๋ฃจ๋น ํ ์คํธ๋ฅผ ๊ฐ์ง)์ `merge`(์ธ์ ํ ๋ฃจ๋น ํ ์คํธ๊ฐ ๋จ์ผ ์คํฌ์ผ๋ก ๋ณํฉ๋จ)์ ๋๋ค. `separate`๊ฐ ๊ธฐ๋ณธ๊ฐ์ด์ง๋ง, `merge`๋ ํน์ ์ํฉ์์ ๊ฐ๋ ์ฑ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- `ruby-overhang`: ์ด ์์ฑ์ ๋ฃจ๋น ํ ์คํธ๊ฐ ๊ธฐ๋ณธ ํ ์คํธ๋ฅผ ๋ฒ์ด๋ ์ ์๋์ง ์ฌ๋ถ๋ฅผ ์ง์ ํฉ๋๋ค. ์ด๋ ๋ฃจ๋น ํ ์คํธ๊ฐ ๊ธฐ๋ณธ ํ ์คํธ๋ณด๋ค ๋์ ๋ ํนํ ๊ด๋ จ์ด ์์ต๋๋ค. ๊ฐ์ผ๋ก๋ `auto`, `none`, `inherit`๊ฐ ์์ต๋๋ค.
๋ค์์ CSS์์ ์ด๋ฌํ ์์ฑ์ ์ฌ์ฉํ๋ ์์์ ๋๋ค:
ruby {
ruby-position: over;
ruby-align: center;
}
์ด CSS ์ฝ๋๋ ๋ฃจ๋น ํ ์คํธ๋ฅผ ๊ธฐ๋ณธ ํ ์คํธ ์์ ๋ฐฐ์นํ๊ณ ์ํ์ผ๋ก ์ค์ ์ ๋ ฌํฉ๋๋ค. ์ํ๋ ์๊ฐ์ ๋ชจ์์ ์ป๊ธฐ ์ํด ์ด๋ฌํ ์์ฑ์ ์ถ๊ฐ๋ก ์ฌ์ฉ์ ์ ์ํ ์ ์์ต๋๋ค.
๊ณ ๊ธ CSS Ruby ๊ธฐ๋ฒ
ํ ๋ง ์ค์ ์ ์ํ CSS ๋ณ์ ์ฌ์ฉ
CSS ๋ณ์(์ฌ์ฉ์ ์ ์ ์์ฑ์ด๋ผ๊ณ ๋ ํจ)๋ฅผ ์ฌ์ฉํ์ฌ ๋ฃจ๋น ์ฃผ์์ ๋ชจ์์ ์ฝ๊ฒ ํ ๋งํํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ๋ฃจ๋น ํ ์คํธ์ ๊ธ๊ผด ํฌ๊ธฐ์ ์์์ ๋ํ ๋ณ์๋ฅผ ์ ์ํ ์ ์์ต๋๋ค:
:root {
--ruby-font-size: 0.7em;
--ruby-color: #888;
}
rt {
font-size: var(--ruby-font-size);
color: var(--ruby-color);
}
๊ทธ๋ฐ ๋ค์, ์ด๋ฌํ ๋ณ์๋ฅผ ์ฝ๊ฒ ๋ณ๊ฒฝํ์ฌ ํ์ด์ง์ ๋ชจ๋ ๋ฃจ๋น ์ฃผ์ ๋ชจ์์ ์ ๋ฐ์ดํธํ ์ ์์ต๋๋ค.
๋ณต์กํ ๋ฃจ๋น ๊ตฌ์กฐ ์ฒ๋ฆฌ
๊ฒฝ์ฐ์ ๋ฐ๋ผ ์ฌ๋ฌ ๊ณ์ธต์ ์ฃผ์์ด๋ ์ฌ๋ฌ ๊ธฐ๋ณธ ๋ฌธ์์ ๊ฑธ์น ์ฃผ์๊ณผ ๊ฐ์ ๋ ๋ณต์กํ ๋ฃจ๋น ๊ตฌ์กฐ๋ฅผ ์ฌ์ฉํด์ผ ํ ์๋ ์์ต๋๋ค. CSS Ruby๋ ์ด๋ฌํ ์๋๋ฆฌ์ค๋ฅผ ์ฒ๋ฆฌํ ์ ์๋ ์ ์ฐ์ฑ์ ์ ๊ณตํฉ๋๋ค.
์๋ฅผ ๋ค์ด, ์ฌ๋ฌ ์์ค์ ์ ๋ณด๋ฅผ ์ ๊ณตํ๊ธฐ ์ํด ๋ฃจ๋น ์ฃผ์์ ์ค์ฒฉํ ์ ์์ต๋๋ค:
<ruby>
<rb>้ฃใใ</rb>
<rp>(</rp><rt>ใใใใใ<ruby><rb>้ฃ</rb><rp>(</rp><rt>ใใ</rt><rp>)</rp></ruby>ใใ</rt><rp>)</rp>
</ruby>
์ด ์์๋ ์ ์ฒด ๋จ์ด "้ฃใใ"์ ๋ํ ๋ฃจ๋น ์ฃผ์ ๋ด์์ ๊ฐ๋ณ ๋ฌธ์ "้ฃ"์ ๋ฐ์์ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค.
๋ฃจ๋น์ ๋ค๋ฅธ CSS ๊ธฐ๋ฒ ๊ฒฐํฉํ๊ธฐ
CSS Ruby๋ ๋ค๋ฅธ CSS ๊ธฐ๋ฒ๊ณผ ๊ฒฐํฉํ์ฌ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ด๊ณ ์ ์ตํ ํ์ดํฌ๊ทธ๋ํผ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, CSS ํธ๋์ง์ ์ ์ฌ์ฉํ์ฌ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ์ ๋(hover) ๋ฃจ๋น ์ฃผ์์ ๋ชจ์์ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํ ์ ์์ต๋๋ค:
ruby {
position: relative;
}
rt {
opacity: 0;
transition: opacity 0.3s ease;
position: absolute; /* Fixes alignment issues*/
top: -1em; /* Adjust as needed */
left: 0; /* Adjust as needed */
width: 100%; /* Ensure covers the base text */
text-align: center; /* Align to the center */
}
ruby:hover rt {
opacity: 1;
}
์ด ์ฝ๋๋ ์ฌ์ฉ์๊ฐ ๊ธฐ๋ณธ ํ ์คํธ ์์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ์ ๋ ๋ฃจ๋น ํ ์คํธ๊ฐ ์์ํ ๋ํ๋๋๋ก ํฉ๋๋ค.
CSS Ruby์ ์ ๊ทผ์ฑ ๊ณ ๋ ค์ฌํญ
CSS Ruby๋ ๋ง์ ์ฌ์ฉ์์ ๊ฐ๋ ์ฑ์ ํฅ์์ํค์ง๋ง, ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๋ฅผ ์ํ ์ ๊ทผ์ฑ์ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ค์ํ ๊ณ ๋ ค์ฌํญ์ ๋๋ค:
- ์คํฌ๋ฆฐ ๋ฆฌ๋ ํธํ์ฑ: ์คํฌ๋ฆฐ ๋ฆฌ๋๊ฐ ๋ฃจ๋น ์ฃผ์์ ์ฌ๋ฐ๋ฅด๊ฒ ํด์ํ๊ณ ์ฝ์ ์ ์๋๋ก ํด์ผ ํฉ๋๋ค. `<ruby>`, `<rb>`, `<rt>`์ ๊ฐ์ ์๋งจํฑ HTML ์์๋ฅผ ์ฌ์ฉํ์ฌ ์ฝํ ์ธ ์ ์๋ฏธ ์๋ ๊ตฌ์กฐ๋ฅผ ์ ๊ณตํ์ธ์. ๋ค์ํ ์คํฌ๋ฆฐ ๋ฆฌ๋๋ก ํ ์คํธํ์ฌ ํธํ์ฑ์ ํ์ธํด์ผ ํฉ๋๋ค.
- ๋์ฒด ์ฝํ ์ธ : CSS Ruby๋ฅผ ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํด ํญ์ `<rp>` ์์๋ฅผ ์ฌ์ฉํ์ฌ ๋์ฒด ์ฝํ ์ธ ๋ฅผ ์ ๊ณตํด์ผ ํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์๊ฐ์ ์ฃผ์์ด ์์ด๋ ์ฝํ ์ธ ๋ฅผ ์ดํดํ ์ ์์ต๋๋ค.
- ๋๋น: ๋ฃจ๋น ํ ์คํธ์ ๋ฐฐ๊ฒฝ ๊ฐ์ ๋๋น๊ฐ ์๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์์๊ฒ ์ถฉ๋ถํ์ง ํ์ธํด์ผ ํฉ๋๋ค. CSS๋ฅผ ์ฌ์ฉํ์ฌ ๋ฃจ๋น ํ ์คํธ์ ๋ฐฐ๊ฒฝ์ ์์์ ์กฐ์ ํ์ฌ ์ ๊ทผ์ฑ ๊ฐ์ด๋๋ผ์ธ์ ์ถฉ์กฑ์ํค์ธ์.
- ๊ธ๊ผด ํฌ๊ธฐ: ๊ธฐ๋ณธ ํ ์คํธ์ ๋ฃจ๋น ํ ์คํธ ๋ชจ๋์ ์ ์ ํ ๊ธ๊ผด ํฌ๊ธฐ๋ฅผ ์ฌ์ฉํ์ธ์. ๋ฃจ๋น ํ ์คํธ๋ ์ฝ๊ฒ ์ฝ์ ์ ์์ ๋งํผ ์ปค์ผ ํ์ง๋ง, ๊ธฐ๋ณธ ํ ์คํธ๋ฅผ ์๋ํ ์ ๋๋ก ์ปค์๋ ์ ๋ฉ๋๋ค. ์ฌ์ฉ์๊ฐ ์์ ์ ์ ํธ์ ๋ฐ๋ผ ํ ์คํธ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ ์ ์๋๋ก ์๋์ ์ธ ๊ธ๊ผด ํฌ๊ธฐ(์: `em` ๋๋ `rem`)๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
CSS Ruby ๋ธ๋ผ์ฐ์ ์ง์
CSS Ruby์ ๋ํ ๋ธ๋ผ์ฐ์ ์ง์์ ์ผ๋ฐ์ ์ผ๋ก ์ํธํ๋ฉฐ, ๋๋ถ๋ถ์ ์ต์ ๋ธ๋ผ์ฐ์ ๊ฐ ํต์ฌ ๊ธฐ๋ฅ์ ์ง์ํฉ๋๋ค. ๊ทธ๋ฌ๋ ์ผ๋ถ ๊ตฌํ ๋ธ๋ผ์ฐ์ ๋ ๋ชจ๋ CSS Ruby ์์ฑ์ ์์ ํ ์ง์ํ์ง ์์ ์ ์์ต๋๋ค. ๊ตฌํ์ด ์์๋๋ก ์๋ํ๋์ง ํ์ธํ๊ธฐ ์ํด ๋ค์ํ ๋ธ๋ผ์ฐ์ ์์ ํ ์คํธํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
Can I use์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ CSS Ruby ์์ฑ์ ๋ํ ํ์ฌ ๋ธ๋ผ์ฐ์ ์ง์์ ํ์ธํ ์ ์์ต๋๋ค.
๊ตฌํ ๋ธ๋ผ์ฐ์ ๋ฅผ ๋ค๋ฃฐ ๋ `<rp>` ์์๋ ํนํ ์ค์ํด์ง๋ฉฐ, ๊ดํธ ์์ ์ฃผ์์ ํ์ํ๋ ๋์ฒด ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ CSS Ruby๊ฐ ์์ ํ ์ง์๋์ง ์๋ ํ๊ฒฝ์์๋ ๊ธฐ๋ณธ์ ์ธ ์์ค์ ์ ๊ทผ์ฑ์ ๋ณด์ฅํฉ๋๋ค.
CSS Ruby์ ์ค์ ์ฌ์ฉ ์์
CSS Ruby๋ ๋ค์๊ณผ ๊ฐ์ ๋ค์ํ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ฌ์ฉ๋ฉ๋๋ค:
- ์จ๋ผ์ธ ์ฌ์ : ๋ง์ ์จ๋ผ์ธ ์ฌ์ ์์ ์ผ๋ณธ์ด, ์ค๊ตญ์ด, ํ๊ตญ์ด ๋จ์ด์ ๋ฐ์ ์๋ด๋ฅผ ์ ๊ณตํ๊ธฐ ์ํด CSS Ruby๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ์ธ์ด ํ์ต ์๋ฃ: ์ธ์ด ํ์ต ์น์ฌ์ดํธ์ ์ฑ์์๋ ํ์ต์๊ฐ ์๋ก์ด ๋จ์ด์ ๋ฐ์๊ณผ ์๋ฏธ๋ฅผ ์ดํดํ๋ ๋ฐ ๋์์ ์ฃผ๊ธฐ ์ํด ์ข ์ข CSS Ruby๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ์ ์์ฑ : ๋์์์ ์ธ์ด๋ก ๋ ์ ์์ฑ ์์๋ ์ฃผ์๊ณผ ์ค๋ช ์ ์ ๊ณตํ๊ธฐ ์ํด CSS Ruby๋ฅผ ์์ฃผ ์ฌ์ฉํฉ๋๋ค.
- ๋ด์ค ์น์ฌ์ดํธ: ๋ด์ค ์น์ฌ์ดํธ์์๋ ๋ณต์กํ๊ฑฐ๋ ์ ์ฐ์ด์ง ์๋ ๋ฌธ์์ ์๋ฏธ๋ฅผ ๋ช ํํ ํ๊ธฐ ์ํด CSS Ruby๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ๊ต์ก ์น์ฌ์ดํธ: ๊ต์ก ์น์ฌ์ดํธ์์๋ ํ์๋ค์ ์ํด ๋ณต์กํ ํ ์คํธ์ ๊ฐ๋ ์ฑ์ ๋์ด๊ธฐ ์ํด CSS Ruby๋ฅผ ์ฌ์ฉํฉ๋๋ค.
์๋ฅผ ๋ค์ด, ์ผ๋ณธ ๋ด์ค ์น์ฌ์ดํธ๋ ๋ ํํ ํ์์ ๋ํ ํ๋ฆฌ๊ฐ๋ ์ฝ๊ธฐ๋ฅผ ํ์ํ๊ธฐ ์ํด ๋ฃจ๋น๋ฅผ ์ฌ์ฉํ์ฌ ๋ ์๋ค์ด ์ฌ์ ์ ๊ณ์ ์ฐพ์๋ณด์ง ์๊ณ ๋ ๊ธฐ์ฌ๋ฅผ ๋ ์ฝ๊ฒ ์ดํดํ ์ ์๋๋ก ํ ์ ์์ต๋๋ค. ์ค๊ตญ์ด ํ์ต ์ฑ์ ๋ฌธ์์ ๋ณ์ ๋ฐ์๊ณผ ์์ด ์ ์๋ฅผ ํ์ํ๊ธฐ ์ํด ๋ฃจ๋น๋ฅผ ์ฌ์ฉํ์ฌ ํ์๋ค์ด ์ธ์ด๋ฅผ ๋ ํจ๊ณผ์ ์ผ๋ก ๋ฐฐ์ธ ์ ์๋๋ก ๋์ธ ์ ์์ต๋๋ค.
ํํ ํจ์ ๊ณผ ์ด๋ฅผ ํผํ๋ ๋ฐฉ๋ฒ
- ์๋ชป๋ HTML ๊ตฌ์กฐ: `<ruby>`, `<rb>`, `<rt>`, `<rp>` ์์๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ์ค์ฒฉ๋์๋์ง ํ์ธํ์ธ์. ์๋ชป๋ ์ค์ฒฉ์ ์๊ธฐ์น ์์ ๋ ๋๋ง ๋ฌธ์ ๋ฅผ ์ผ์ผํฌ ์ ์์ต๋๋ค.
- ์ผ๊ด์ฑ ์๋ ์คํ์ผ๋ง: ๋ฃจ๋น ์ฃผ์์ ์คํ์ผ๋ง์ด ์ผ๊ด์ฑ ์๊ฒ ์ ์ฉ๋๋ ๊ฒ์ ํผํ์ธ์. ์น์ฌ์ดํธ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฒด์์ ์ผ๊ด๋ ๋ชจ์๊ณผ ๋๋์ ์ ์งํ์ธ์. CSS ๋ณ์๋ฅผ ์ฌ์ฉํ์ฌ ์คํ์ผ๋ง์ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ์ธ์.
- ์ ๊ทผ์ฑ ๋ฌด์: ์ ๊ทผ์ฑ์ ๊ณ ๋ คํ์ง ์์ผ๋ฉด ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๋ฅผ ๋ฐฐ์ ํ ์ ์์ต๋๋ค. ํญ์ ๋์ฒด ์ฝํ ์ธ ๋ฅผ ์ ๊ณตํ๊ณ ์คํฌ๋ฆฐ ๋ฆฌ๋ ํธํ์ฑ์ ํ์ธํ์ธ์.
- ๋ฃจ๋น ๋จ์ฉ: ๋ฃจ๋น ์ฃผ์์ ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ฉด ํ ์คํธ๊ฐ ๋ณต์กํด์ง๊ณ ์ฝ๊ธฐ ์ด๋ ค์์ง ์ ์์ต๋๋ค. ๋ฐ์์ด๋ ์๋ฏธ๋ฅผ ๋ช ํํ ํ ํ์๊ฐ ์์ ๋๋ง ์ ์คํ๊ฒ ๋ฃจ๋น ์ฃผ์์ ์ฌ์ฉํ์ธ์.
๊ฒฐ๋ก : CSS Ruby๋ก ๊ธ๋ก๋ฒ ์ปค๋ฎค๋์ผ์ด์ ๊ฐํํ๊ธฐ
CSS Ruby๋ ์น์์ ๋์์์ ์ธ์ด์ ํ์ดํฌ๊ทธ๋ํผ๋ฅผ ํฅ์์ํค๋ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค. ๋ฃจ๋น ์ฃผ์์ ๊ตฌํํ๋ ํ์คํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํจ์ผ๋ก์จ ๊ฐ๋ ์ฑ, ์ ๊ทผ์ฑ ๋ฐ ์ ๋ฐ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํฉ๋๋ค. ์น์ด ์ ์ ๋ ๊ธ๋ก๋ฒํด์ง์ ๋ฐ๋ผ, ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ํฌ์ฉ์ ์ด๊ณ ๋งค๋ ฅ์ ์ธ ์ฝํ ์ธ ๋ฅผ ๋ง๋ค๊ธฐ ์ํด์๋ CSS Ruby๋ฅผ ์ดํดํ๊ณ ํ์ฉํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค. ์น ๊ฐ๋ฐ์์ ์ฝํ ์ธ ์ ์์๋ CSS Ruby๋ฅผ ์ ์คํ๊ฒ ๊ตฌํํจ์ผ๋ก์จ ์ธ์ด ์ฅ๋ฒฝ์ ํ๋ฌผ๊ณ ๋ค์ํ ๊ธ๋ก๋ฒ ๊ณ ๊ฐ์ ์ํ ๋ ์ ๊ทผํ๊ธฐ ์ฝ๊ณ ์ฌ์ฉ์ ์นํ์ ์ธ ๋์งํธ ๊ฒฝํ์ ๋ง๋ค ์ ์์ต๋๋ค.
์ธ์ด ํ์ต ํ๋ซํผ๋ถํฐ ๋ด์ค ์น์ฌ์ดํธ, ๋์งํธ ๋ฌธํ์ ์ด๋ฅด๊ธฐ๊น์ง, CSS Ruby์ ์ฌ๋ ค ๊น์ ์ฌ์ฉ์ ๋์์์ ํ ์คํธ๊ฐ ๋ ๋์ ๋ ์์ธต์๊ฒ ์ ๊ทผ ๊ฐ๋ฅํ๊ณ ์ดํด๋ ์ ์๋๋ก ๋ณด์ฅํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. ์น ๊ธฐ์ ์ด ๊ณ์ ๋ฐ์ ํจ์ ๋ฐ๋ผ, CSS Ruby๋ ์ง์ ์ผ๋ก ๊ธ๋ก๋ฒํ๊ณ ํฌ์ฉ์ ์ธ ์น์ ๋ง๋ค๊ธฐ ์ํ ๋ ธ๋ ฅ์์ ์ค์ํ ์์๋ก ๋จ์ ๊ฒ์ ๋๋ค.